<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Pendulum with Nail</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define parameters to match the visual layout of the image
        const l = 200;
        const massRadius = 9;
        const mass_start = { x: 120, y: 100 };
        const pivot = { x: mass_start.x + l, y: mass_start.y };
        
        // Visual parameters for the smaller circle and 'd' label to match the drawing
        const r_visual = 75;
        const d_visual = 80;
        const nail_visual = { x: pivot.x - 85, y: pivot.y + d_visual };
        

        // Set common drawing styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw the initial state (mass, string, pivot)
        // Mass 'm'
        ctx.beginPath();
        ctx.arc(mass_start.x, mass_start.y, massRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Label 'm'
        ctx.font = 'italic 24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('m', mass_start.x - 2, mass_start.y - massRadius - 5);

        // String 'l'
        ctx.beginPath();
        ctx.moveTo(mass_start.x + massRadius, mass_start.y);
        ctx.lineTo(pivot.x, pivot.y);
        ctx.stroke();

        // Label 'l'
        ctx.font = 'italic 24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('l', mass_start.x + l / 2, mass_start.y - 8);

        // Pivot marker
        ctx.beginPath();
        ctx.moveTo(pivot.x, pivot.y - 8);
        ctx.lineTo(pivot.x, pivot.y + 8);
        ctx.stroke();

        // 2. Draw the elements related to the nail and distance 'd'
        // Top marker for distance d
        ctx.beginPath();
        ctx.moveTo(nail_visual.x, pivot.y - 8);
        ctx.lineTo(nail_visual.x, pivot.y + 8);
        ctx.stroke();
        
        // Nail marker (center of small circle)
        ctx.beginPath();
        ctx.moveTo(nail_visual.x, nail_visual.y - 8);
        ctx.lineTo(nail_visual.x, nail_visual.y + 8);
        ctx.stroke();

        // Label 'd'
        ctx.font = 'italic 24px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('d', nail_visual.x + 10, nail_visual.y - d_visual / 2);

        // 3. Draw the dashed paths
        ctx.setLineDash([6, 6]);

        // First path (arc from pivot)
        ctx.beginPath();
        // Start angle PI (9 o'clock), end angle is partial to match the drawing
        ctx.arc(pivot.x, pivot.y, l, Math.PI, Math.PI * 1.45);
        ctx.stroke();

        // Second path (circle around nail)
        ctx.beginPath();
        ctx.arc(nail_visual.x, nail_visual.y, r_visual, 0, 2 * Math.PI);
        ctx.stroke();

        // 4. Draw the figure caption
        ctx.setLineDash([]); // Reset to solid line
        ctx.font = 'bold 22px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Fig. 1.8.', canvas.width / 2, canvas.height - 40);
    </script>
</body>
</html>